<template>
  <!-- 
    Vue 3模板支持多根节点，无需额外包裹元素
    以下是三个独立的功能区块：姓名输入、姓名展示、数字相加
  -->
  
  <!-- 姓名输入框：使用v-model双向绑定到username变量 -->
  请输入姓名：<input type="text" v-model="username"></input>
  
  <!-- 姓名展示区：通过插值表达式{{}}显示username的当前值 -->
  <div>姓名是：{{ username }}</div>
  
  <!-- 注释掉的原始数字输入（未使用.number修饰符） -->
  <!-- <input type="text" v-model="n1"></input> + <input type="text" v-model="n2"></input> = {{ n1 + n2 }} -->
  
  <!-- 
    数字相加功能：
    1. v-model.number修饰符将输入值自动转换为数字类型
    2. 避免了默认字符串拼接的问题（如"1"+"2"="12"）
    3. 实时计算并显示n1和n2的和
  -->
  <input type="text" v-model.number="n1"></input> + 
  <input type="text" v-model.number="n2"></input> = 
  {{ n1 + n2 }}

</template>
<script setup>
// 导入Vue的ref函数，用于创建响应式变量
import { ref } from 'vue'

// 创建响应式变量username，初始值为"zhangsan"
// 当输入框内容变化时，该变量会自动更新，反之亦然
const username = ref('zhangsan')

// 创建两个数字类型的响应式变量
// 初始值分别为1和2，用于数字相加功能
const n1 = ref(1)
const n2 = ref(2)

/* 
  总结：
  1. v-model实现表单输入与数据的双向绑定
  2. .number修饰符确保输入值被解析为数字
  3. {{}}插值表达式用于实时显示数据
  4. ref创建的响应式变量在模板中直接使用，无需.value
*/
</script>
